<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <el-card>
          <h3>还没有加入班级？！输入班级码立即加入！班级码请联系任课教师获得！</h3>
        
          <el-input placeholder="班级码" v-model="clazz_code" clearable>
            <el-button slot="append"
              type="primary"
              @click="joinClazz"
              >加入班级</el-button>
          </el-input>
          <el-divider />
            <el-table v-loading="loading" :data="studentClazzVOList">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="id" align="center" prop="id" />
              <el-table-column label="班级名称" prop="clazzName" width="120" />
              <!-- <el-table-column label="课程码" prop="clazzName" :show-overflow-tooltip="true" width="150" /> -->
              <!-- <el-table-column label="状态" align="center" width="100"> -->
                <!-- <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column> -->
              <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column> -->
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="quitClazz(scope.row)"
                  
                  >退出班级</el-button>
              
                </template>
              </el-table-column>
          </el-table>
          
        </el-card>
        
       
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <el-row>
          <el-col :span="20">
            <h2>加入班级成功后，请刷新页面</h2>
          </el-col>
        </el-row>
        
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" style="padding-left: 20px">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>我的课程</span>
          </div>
          <div class="body">
            <el-table v-loading="loading" :data="courseStudentVOList">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="id" align="center" prop="id" />
              <el-table-column label="课程名称" prop="courseName" width="120" />
              <!-- <el-table-column label="课程码" prop="clazzName" :show-overflow-tooltip="true" width="150" /> -->
              <!-- <el-table-column label="状态" align="center" width="100"> -->
                <!-- <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column> -->
              <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column> -->
              <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="quitClazz(scope.row)"
                  
                  >退出班级</el-button>
              
                </template>
              </el-table-column> -->
            </el-table>
           
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" style="padding-left: 20px">
      
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>正在上的课</span>
          </div>
          <div class="body">
            <el-table v-loading="loading" :data="lessonList">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="id" align="center" prop="id" />
              <el-table-column label="课名称" prop="name" width="120" />
            
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="goLessson(scope.row)"
                  
                  >去上课</el-button>
              
                </template>
              </el-table-column>
            </el-table>
           
          </div>
        </el-card>
      </el-col>
    
    </el-row>
  </div>
</template>

<script>
import { joinClazz} from "@/api/feedback/studentclazz";
import { listMyInfo} from "@/api/feedback/studentinfo";
import { delStudentclazz } from "@/api/feedback/studentclazz";
export default {
  name: "Index",
  data() {
    return {
      ids:[],
      // 遮罩层
      loading: false,
      // 班级码
      clazz_code: "",
      studentClazzVOList:[],
      courseStudentVOList:[],
      lessonList:[],
    };
  },
  created(){
    this.listStudentInfo();
  },
 
  methods: {
    joinClazz() {
      this.loading = true;
      joinClazz({"clazzCode":this.clazz_code}).then(response => {
        this.$modal.msgSuccess("加入班级成功!");
        this.listStudentInfo();
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      });
    },
    listStudentInfo(){
      this.loading = true;

      listMyInfo().then(res => {
     
        this.studentClazzVOList = res.data.studentClazzVOList;
        this.courseStudentVOList = res.data.courseStudentVOList;
        this.lessonList = res.data.lessonList;
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      });
    },
    quitClazz(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认退出编号为"' + ids + '"的班级？').then(function() {
        return delStudentclazz(ids);
      }).then(() => {
        this.listStudentInfo();
        this.$modal.msgSuccess("退出完成");
      }).catch(() => {});
    },
    goLessson(row){
      const ids = row.id || this.ids;
      console.log("/feedback/lesson/student/" +ids);
      this.$router.push({path:"/feedback/lesson/student/" +ids});
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

